import React, { memo, FC, ReactNode, useState } from "react";
import style from "@/style/right/index.module.less";
import { Drawer } from "antd";
interface IProps {
  children?: ReactNode;
}
const App: FC<IProps> = memo(() => {
  const [open, setOpen] = useState(false);

  const closeDrawer = () => {
    setOpen(false);
  };

  const showDrawer = () => {
    setOpen(true);
  }
  const containerStyle: React.CSSProperties = {
    position: "relative",
    height: "100%",
    overflow: "hidden",
    textAlign: "center",
  };

  return (
    <div className={style.right_con}>
      {open ? (
        <div onClick={closeDrawer} className={style.btn}>
          <i className="iconfont icon-lowguanbixiao"></i>
        </div>
      ) : (
        <div className={ style.open } onClick={showDrawer}>
          <i className="iconfont icon-lowxiangzuo"></i>
        </div>
      )}
      <div className={style.cont} style={{ width: "350px" }}>
        <div style={containerStyle}>
          <div style={{ marginTop: 16 }}>
            <div></div>
          </div>
          <Drawer
            title="操作栏"
            placement="right"
            closable={false}
            open={open}
            width="350"
            mask={ false }
            getContainer={false}
          >
            <p>Some contents...</p>
          </Drawer>
        </div>
      </div>
    </div>
  );
});

export default App;
